<template>
  <div class="shop-r-form">
    <h2 class="pancel-title panel-8 flex v-align-c">
      <span></span>
      <i>搜索框</i>
    </h2>
    <h3 class="pancel-s-title">颜色设置</h3>
    <el-form class="pad-t-15 pad-l-25 pad-r-25 form-diy">
      <div class="border-box flex">
        <div class="flex-item">
          <h4>背景</h4>
          <div class="mar-t-3 mar-b-5">
            <el-form-item>
              <div class="flex font-12 pad-r-30">
                <el-color-picker :predefine="predefineColors" v-model="details.propMap.backgroundColor" class="color-sel"></el-color-picker>
              </div>
            </el-form-item>
          </div>
        </div>
      </div>
      <div class="mar-l--25 mar-t--28 pad-b-15">
        <h3 class="pancel-s-title">样式风格</h3>
      </div>
      <div class="border-box near-box">
        <h4>对齐方式</h4>
        <div class="mar-t--5 mar-b--10">
          <el-form-item>
            <div class="font-14">
              <el-row>
                <el-col :span="8">
                  <el-radio v-model="details.propMap.searchStyle" label="10">圆角</el-radio>
                </el-col>
                <el-col :span="8">
                  <el-radio v-model="details.propMap.searchStyle" label="11">圆弧</el-radio>
                </el-col>
                <el-col :span="8">
                  <el-radio v-model="details.propMap.searchStyle" label="12">正方形</el-radio>
                </el-col>
              </el-row>
            </div>
          </el-form-item>
        </div>
      </div>
      <div class="border-box near-box">
        <h4>对齐方向</h4>
        <div class="mar-t--5 mar-b--10">
          <el-form-item>
            <div class="font-14">
              <el-row>
                <el-col :span="8">
                  <el-radio v-model="details.propMap.textAlign" label="10">居左</el-radio>
                </el-col>
                <el-col :span="8">
                  <el-radio v-model="details.propMap.textAlign" label="11">居中</el-radio>
                </el-col>
              </el-row>
            </div>
          </el-form-item>
        </div>
      </div>
      <div class="border-box">
        <h4>默认文字</h4>
        <div class="mar-t-1 mar-b--15">
          <el-form-item>
            <div>
              <el-input placeholder="最多10个字" maxlength="10" class="mini-s-input" v-model="details.propMap.placeholder"/>
            </div>
          </el-form-item>
        </div>
      </div>
    </el-form>
  </div>
</template>

<script>
  import { getStrByLength } from '@/utils'
  import { getToken } from '@/utils/auth'

  export default {
    components: { },
    props: {
      details1: {
        type: Object,
        default: null
      }
    },
    data() {
      return {
        details: {
          detailsId: '',
          pageId: '',
          sortNo: 0,
          componentType: 0,
          backColor: '',
          propMap: {}
        },
        fullScreenLoading: null,
        pictureType: '1',
        predefineColors: []
      }
    },
    // 初始化页面
    created() {
      this.resetDetails()
      this.details = this.details1
      this.token = { accessToken: getToken() }
      const that = this
      this.$bus.$on('resetDetailsSearch', function(details) {
        that.details = details
      })
      this.predefineColors = this.$store.state.globalData.predefineColors
    },
    methods: {
      getStrByLength(str, n) {
        return getStrByLength(str, n)
      },
      resetDetails() {
        this.details = {
          detailsId: '',
          pageId: '',
          sortNo: 0,
          componentType: 0,
          backColor: '',
          propMap: {}
        }
      }
    }
  }
</script>
